<script>
	import { scale } from 'svelte/transition';
	import anime from 'animejs';
	function handler(params) {
		anime({
			targets: '.animation-keyframes-demo .el',
			keyframes: [
				{ translateX: [200, 250], scale: 3 },
				{ translateY: -40, backgroundColor: '#f40' },

				{
					value: '*=2.5', // 100px * 2.5 = '250px'
					duration: 1000
				},
				{ translateY: 40, opacity: 0.2 },
				{ translateX: 0, backgroundColor: '#fff' },
				{ width: '100%' },
				{ translateY: 0 }
			],
			duration: 4000,
			easing: 'easeOutElastic(1, .8)',
			loop: true
		});
	}
</script>

<div class="demo-content animation-keyframes-demo" on:click={handler}>
	<div class="shadow circle" />
	<div class="circle el keyframes" />
</div>

<style>
	.demo-content {
		min-height: 200px;
	}
	.shadow {
		position: absolute;
		opacity: 0.2;
	}
	.square,
	.circle {
		pointer-events: none;
		position: relative;
		width: 28px;
		height: 28px;
		margin: 45px;
		background-color: currentColor;
		font-size: 14px;
	}

	.circle {
		border-radius: 50%;
	}
</style>
